<template>
  <div class="fireDetail">
    <div class="header">
      <span class="text">火点灾情信息</span>
      <span class="close" @click="closeDetail()">
        <i class="el-icon-close"></i>
      </span>
    </div>
    <div class="infoBox">
      <div class="infoItem">
        <p>
          <span>时间:</span>
          <span>{{ detailData.observeTime }}</span>
        </p>
      </div>
      <div class="infoItem">
        <p>
          <span>地名:</span>
          <span>{{ detailData.place }}</span>
        </p>
      </div>
      <div class="infoItem" v-show="detailData.distance != 0">
        <p>
          <span>{{ detailData.place }}与火点距离:</span>
          <span>{{ detailData.distance }}Km</span>
        </p>
      </div>
      <div class="infoItem" v-show="detailData.direction != 0">
        <p>
          <span>{{ detailData.place }}与火点方位角:</span>
          <span>{{ detailData.direction }}</span>
        </p>
      </div>
      <div class="infoItem">
        <p>
          <span>经度:</span>
          <span>{{ detailData.longitude.toFixed(7) }}</span>
        </p>
        <p>
          <span>纬度:</span>
          <span>{{ detailData.latitude.toFixed(7) }}</span>
        </p>
      </div>
      <div
        class="infoItem"
        v-show="detailData.elevationAver != 0 && detailData.intensityG != 0"
      >
        <p>
          <span>高程(平均):</span>
          <span>{{ detailData.elevationAver }}</span>
        </p>
        <p>
          <span>强度G:</span>
          <span>{{ detailData.intensityG }}</span>
        </p>
      </div>
      <div
        class="infoItem"
        v-show="detailData.intensityT != 0 && detailData.hotspot != 0"
      >
        <p>
          <span>强度T:</span>
          <span>{{ detailData.intensityT }}</span>
        </p>
        <!-- <p>
          <span>热点数:</span>
          <span>{{ detailData.hotspot }}</span>
        </p> -->
      </div>
      <div class="infoItem">
        <p>
          <span>行政编码:</span>
          <span>{{ detailData.adminCode }}</span>
        </p>
      </div>
      <div class="infoItem" v-show="detailData.repeat != 0">
        <p>
          <span>疑似重复次数:</span>
          <span>{{ detailData.repeat }}</span>
        </p>
      </div>
    </div>
    <div class="typeBox" v-show="detailData.gfAver">
      <div class="typeItem">
        <p>
          <span>植被类型:</span>
          <span>{{ detailData.speciesType }}</span>
        </p>
      </div>
      <div class="typeItem">
        <p>
          <span>植被覆盖度(平均):</span>
          <span>{{ detailData.gfAver ? detailData.gfAver + "%" : 0 }}</span>
        </p>
      </div>
      <div class="typeItem">
        <p>
          <span>森林:</span>
          <span>{{
            detailData.forestPercent ? detailData.forestPercent + "%" : 0
          }}</span>
        </p>
        <p>
          <span>草地:</span>
          <span>{{
            detailData.lawnPercent ? detailData.lawnPercent + "%" : 0
          }}</span>
        </p>
      </div>
      <div class="typeItem">
        <p>
          <span>农田及自然植被:</span>
          <span>{{ detailData.farm ? detailData.farm + "%" : 0 }}</span>
        </p>
        <p>
          <span>灌木:</span>
          <span>{{ detailData.bush ? detailData.bush + "%" : 0 }}</span>
        </p>
      </div>
      <div class="typeItem">
        <p>
          <span>城市或荒漠:</span>
          <span>{{ detailData.city ? detailData.city + "%" : 0 }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
let circleEntity = [];//扩散波
let poiModel = [];//poi点
export default {
  name: "fireDetail",
  data() {
    return {
      detailData: {
        id: 171659,
        intensityG: 1,
        intensityT: 2,
        thresholdG: 30,
        thresholdT: 241,
        g10: 240,
        g20: 240,
        g30: 239,
        g40: 240,
        g50: 240,
        g60: 240,
        x: 1280,
        y: 1744,
        longitude: 110.339,
        latitude: 19.242,
        hotspot: 13,
        adminCode: "46010104",
        elevationMin: 6,
        elevationAver: 101,
        elevationMax: 396,
        gf0: 0,
        gfPercent: 7,
        gfAver: 50,
        forestPercent: 25,
        lawnPercent: 36,
        farm: 38,
        bush: 0,
        city: 0,
        place: "海南琼海崩岭",
        fileId: 6170,
        geo: null,
        createTime: "2021-04-13 16:54:01",
        distance: 0.5,
        direction: 280,
        observeTime: "2021-04-13 16:40:00",
        vegType: "农田及自然植被",
        cityRegion: "定安县",
        speciesType: "天然阔叶",
        isCheck: null,
        realVegType: null,
        code: "HD-20210413-600",
        repeat: 0,
      },
      radius:3,//扩散波半径km
    };
  },
  props:['fireId'],
  computed:{
        fireId(){
            return this.$store.state.fireId
        }
  },
  watch:{
    fireId(val){
      this.getFireData();
    },
  },
  mounted(){
    // 获取火点详情
    this.getFireData();
  },
  methods:{
    // 关闭面板
    closeDetail(){
      this.$emit('closeDetail')
      this.$store.commit("changeShowFireDetail",false)
    },
    // 获取火点详情
    async getFireData(){
      let res = await axios.get(`${window.huoqingApiUrl}/task/firePointDetail`,{params: { id: this.fireId }})
      this.detailData = res.data;
      // 添加扩散波
      this.showCricle()
    },
    // 扩散波
    showCricle(){
      if(circleEntity) this.hideCircle();
      // if(this.radius <= 0) return;
      let data = {
        id:this.detailData.id,
        imageUrl:'/images/fireReport/ripple.png',
        lon:this.detailData.longitude,
        lat:this.detailData.latitude,
        height:0,
        minR:100,
        maxR:this.radius * 1000,
        deviationR:this.radius * 10,
      }
      let r1 = data.minR, r2=data.minR
      function changeR1() {
        r1 = r1 + data.deviationR
        if(r1 >= data.maxR){
          r1 = data.minR
        }
        return r1;
      }
      function changeR2 () {
        return r1
      }
      circleEntity = viewer.entities.add({
        name: "",
        // id: data.id,
        position: Cesium.Cartesian3.fromDegrees(data.lon,data.lat,data.height),
        ellipse: {
          semiMinorAxis: data.maxR,
          semiMajorAxis: data.maxR,
          // semiMinorAxis: new Cesium.CallbackProperty(changeR2,false),
          // semiMajorAxis: new Cesium.CallbackProperty(changeR1,false),
          height: data.height,
          material: new Cesium.ImageMaterialProperty({
            // image: data.imageUrl,
            repeat: new Cesium.Cartesian2(1.0, 1.0),
            transparent: true,
            color: Cesium.Color.RED.withAlpha(0.2),
            // color: new Cesium.CallbackProperty(function () {
            //   return Cesium.Color.WHITE.withAlpha(1.7-r1/data.maxR)  //entity的颜色透明 并不影响材质，并且 entity也会透明哦
            // },false)
          })
        }
      })
      // 添加poi点
      this.showPOI(data)
    },
    // 清除扩散波
    hideCircle(){
      viewer.entities.remove(circleEntity);
      circleEntity = null;
    },
    // 渲染POI点
    async showPOI(data){
      let params = { lon:data.lon, lat:data.lat, radius:data.maxR };
      let poiRes = await axios.get(`${window.huoqingApiUrl}/api/poi-point/nearby`,{ params: params});
      // this.selectOptions = poiRes
      // 每次更新数据，清除之前的实体
      this.hidePOI()
      poiModel = [];
      //添加标记
      for (let item of poiRes.data) {
        let entity = viewer.entities.add({
          name: item.ppType,
          id: item.ppId, 
          position: Cesium.Cartesian3.fromDegrees(item.ppLon, item.ppLat),
          billboard: {
            image: `./images/fireReport/poi/${item.ppGroup}_${item.ppType}.png`,
            scale: 0.8,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            scaleByDistance: new Cesium.NearFarScalar(10000, 1, 100000, .7),
            disableDepthTestDistance : Number.POSITIVE_INFINITY,
            width:30,
            height:30
          },
          entityType:"poi",
          poiType:item.ppType
        });
        poiModel.push(entity);
      }
      // this.poiFormated = this.calPoiNum(poiRes)
      // console.log(this.poiFormated)
    },
    // 清除POI点
    hidePOI(){
      for (var i = 0; i < poiModel.length; i++) {
        viewer.entities.remove(poiModel[i]);
      }
      poiModel = [];
    },
  },
  beforeUnmount(){
    this.hideCircle();
    this.hidePOI();
    // if(handler3D){
    //   handler3D.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    //   handler3D = null;
    // }
  },
};
</script>

<style lang="stylus" scoped>
.fireDetail {
  position: absolute;
  top: 130px;
  right: 400px;
  width: 260px;
  max-height: 425px;
  padding: 10px;
  z-index:3;
  background: rgba(0, 0, 0, 0.5);
  .header{
    display: flex;
    justify-content: space-between;
    .text{
      color:#00e5fd;
      font-size: 18px;
    }
    .close{
      cursor: pointer;
    }
  }
  .infoBox, .typeBox{
    padding-bottom: 10px;
    border-bottom: 2px dotted #0c4f55;
    .infoItem, .typeItem{
      display: flex;
      justify-content: space-between;
      p{
        line-height: 30px;
        color:#fff;
        font-size: 14px;
        span:first-child{
          color:rgba(109,204,188,1);
          margin-right: 5px;
        }
      }
    }
  }
  .typeBox{
    border-bottom: 0;
  }
}
</style>